<template>
  <div class="gold-shop-wrap">
    <van-nav-bar
      title="线上商家入驻"
      left-arrow
      fixed
      @click-left="onClickLeft"
     :class="{ scrolled: isScrolled }"

      :right-text="merchantInfo.status==10?'审核中':merchantInfo.status==20?'审核失败':merchantInfo.status==-1?'':merchantInfo.id>0?'审核通知':''"
      @click-right="onClickRight"
    />
    <!-- merchantInfo.status==20?'审核失败'
      :merchantInfo.status==30?'进件中':merchantInfo.status==40?'进件失败':merchantInfo.status==100?'已通过':merchantInfo.status==110?'已禁用':'' -->
    <div class="custom-navbar">
      <div class="custom-box">
        <div class="custom_title">店铺申请</div>
        <div class="step-container">
          <div v-for="(step, index) in steps" :key="index" class="step-wrapper">
            <!-- @click="active=index" -->
            <div :class="['step', { completed: index <= active }]" >
              {{ index + 1 }}
            </div>
            <div class="step-label">{{ step }}</div>
          </div>
        </div>
      </div>
      <!--  -->
    </div>
    <div class="custom-content">
      <shop-info v-if="active === 0" :info="merchantInfo" @shopInfo="getShopInfo"></shop-info>
      <shop-pic v-if="active === 1" :info="merchantInfo" @shopPic="getShopPic" @goBack="getBack"></shop-pic>
      <legalPerson-info
        v-if="active === 2"
        :info="merchantInfo"
        @legalPerson="getlegalPerson"
        @goBack="getBack"
      ></legalPerson-info>
      <bankCard-info
        v-if="active === 3"
        :info="merchantInfo"
        @bankCard="getBankCardInfo"
        @goBack="getBack"
      ></bankCard-info>
    </div>
    <van-popup v-model="showPopup" round  :style="{ width: '80%' }">
        <div class="popup-content">
            <img v-if="merchantInfo.status==100"  src="../../../images/mine/success.png"/>
            <img v-else  src="../../../images/mine/fail.png"/>
            <div class="popup-title" v-if="merchantInfo.status!=100">审核通知</div>
            <div class="popup-text">
                {{merchantInfo.audit_reason}}
            </div>
            <van-button
          round
          block
          type="info"
          @click="showPopup=false"
          style="width: 50%;margin: 0.32rem auto;"
          color="linear-gradient(to right, #FF5851, #E9011B)"
          >确定</van-button
        >
        </div>
    </van-popup>
  </div>
</template>
<script>
import shopInfo from "./components/shopInfo.vue";
import shopPic from "./components/shopPic.vue";
import legalPersonInfo from "./components/legalPersonInfo.vue";
import bankCardInfo from "./components/bankCardInfo.vue";
import { ONLINE_SHOP_INFO ,ONLINE_CATE_COMMIT} from "@/api/mine";
export default {
  components: { shopInfo, shopPic, legalPersonInfo, bankCardInfo },
  data() {
    return {
      steps: ["店铺信息", "店铺图片", "法人信息", "银行卡信息"],
      active: null,
      isScrolled: false,
      rightShow: false,
      statusShow: true,
      merchantInfo: {},
      showPopup:false,
    };
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    window.scrollTo(0, 0)
    const id = this.$route.query.id || 0;
    this.$http.get(`/shop/manage/${id}/info`).then((res) => {
      // console.log(res);
      this.merchantInfo = res.data;
      this.active= 0
      if(res.data.status==20 || res.data.status==110 || res.data.status==40){
        this.examine(res.data.status);
      }else if(res.data.status==100 ){
        // 已通过
      }
    });
  },
  methods: {
    // 审核失败
    examine(status){
        this.showPopup=true
    },
    getBack(value){
        this.active=value
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      if (this.statusShow) {
        this.$router.push({
          path:"/examineNotify",
          query:{
            shop_id:this.merchantInfo.id
          }
        });
      } else {
        // this.$router.push('/')
      }
    },
    handleScroll() {
      // console.log(window.scrollY);

      this.isScrolled = window.scrollY > 26;
    },
    // 店铺信息
    getShopInfo(value, business_license) {
      this.merchantInfo.name = value.name;
      this.merchantInfo.business_license = business_license;
      this.merchantInfo.business_license.license_url = value.license_url.map(
        (item) => item.url
      )[0];
      this.merchantInfo.contacts=value.contacts
      this.merchantInfo.name=value.name
      this.merchantInfo.phone=value.phone
      this.merchantInfo.email=value.email

      // let pic = {
      //   qualification_url: value.qualification_url.map((item) => item.url)[0],
      //   authorization_url: value.authorization_url.map((item) => item.url)[0],
      // };
      // this.merchantInfo.image_data = pic;
      this.active = 1;
    },
    // 店铺图片
    getShopPic(value, params) {
      this.merchantInfo.cover_url = value.cover_url[0]?.url || '';
      this.merchantInfo.image_data.company_front_image_url= value.company_front_image_url.map(item=>item.url)[0]
      this.merchantInfo.image_data.inside_image_url= value.inside_image_url.map(item=>item.url)[0]
      this.merchantInfo.image_data.head_image_url= value.head_image_url.map(item=>item.url)[0]

      this.merchantInfo.address = value.address;
      this.merchantInfo.cate_id=params.cate_id
      this.merchantInfo.cate_name=params.cate_name
      this.merchantInfo.region_code=params.region_code
      this.merchantInfo.region_name=params.region_name
      this.active = 2;
    },
    // 法人信息
    getlegalPerson(value) {
      console.log(value,1212);
      
      this.merchantInfo.legal_person=value.legal_person
      this.merchantInfo.legal_person.name=value.legal_person.name
      this.merchantInfo.legal_person.front_url = value.legal_person.front_url;
      this.merchantInfo.legal_person.back_url = value.legal_person.back_url;
      this.active = 3;
    },
    // 银行卡信息
    getBankCardInfo(valueArray,value,data) {
      this.merchantInfo.account_data=value
      this.merchantInfo.account_data.license_url=value.license_url.map(item=>item.url)[0],
      this.merchantInfo.account_data.province_code=valueArray[0],
      this.merchantInfo.account_data.city_code=valueArray[1],
      this.merchantInfo.account_data.county_code=valueArray[2],
      this.merchantInfo.account_dataregion_code=data.region_code
      this.merchantInfo.account_data.region_name=data.region_name
      this.merchantInfo.company_type=1
      this.merchantInfo.account_data.type=3
      this.merchantInfo.account_data.account=value.account
      this.merchantInfo.account_data.branch_name=value.branch_name
      this.merchantInfo.account_data.bank_name=value.bank_name
    //  this.merchantInfo.password=value.password
    //   this.rightShow = true;
      // console.log(this.merchantInfo);
        this.$http.post(ONLINE_CATE_COMMIT,this.merchantInfo).then(res=>{
        //   console.log(res);
          this.$toast.success('提交成功')
          this.$router.push('/merchantList')
        })
      // 请求接口
      // this.active = 4
    },
  },
};
</script>
<style scoped lang="scss">
.popup-content{
    // width:80%;
    height:auto;
    padding:.3rem;
    box-sizing:border-box;
    text-align:center;
    img{
        width:1.2rem;
    }
    .popup-title{
        font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: .36rem;
color: #333333;
font-style: normal;
    }
    .popup-text{
        margin-top:.3rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #666666;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}
.gold-shop-wrap {
  // min-height: 100vh;
  padding-top: 46px;

  // background: #F2F4F5;
  ::v-deep .van-hairline--bottom::after {
    border: none;
  }

  ::v-deep .van-icon {
    color: #fff;
  }

  ::v-deep .van-nav-bar__title {
    color: #fff;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }

  ::v-deep .van-nav-bar__text {
    color: #fff;
  }

  ::v-deep .van-nav-bar {
    background: transparent;
    position: fixed; // 改为固定定位
    top: 0; // 添加这行
    left: 0; // 添加这行
    right: 0; // 添加这行
    z-index: 1000; // 添加这行，确保它在其他元素之上

    // position: fixed;
    &.scrolled {
      background-color: #ffffff; // 或者你想要的任何颜色

      .van-nav-bar__title,
      .van-icon,
      .van-nav-bar__text {
        color: #333; // 滚动后变为黑色
      }
    }
  }

  /* 设置自定义 NavBar 的背景图片 */
  .custom-navbar {
    background-image: url("../../../images/mine/bg.png");
    /* 替换为你的图片路径 */
    background-size: cover;
    /* 背景图片覆盖整个元素 */
    background-position: center;
    /* 背景图片居中 */
    position: relative;
    /* 相对定位 */
    top: -46px;
    /* 根据你的 NavBar 高度调整，Vant UI 默认 NavBar 高度为 46px */
    width: 100%;

    /* 宽度与父元素相同 */
    // height: 46px;
    /* NavBar 的高度 */
    // z-index: 1;
    /* 确保位于 NavBar 之上 */
    .custom-box {
      padding-top: 50px;

      .custom_title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 0.32rem;
        color: #ffffff;
        line-height: 0.44rem;
        // text-align: left;
        padding: 0 0.32rem;
        padding-bottom: 0.32rem;
        font-style: normal;
      }
    }
  }
}

.step-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 0.52rem;
  // max-width: 600px;
  // margin: 0 auto 20px;
}

.step-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-wrapper:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 80%;
  width: 40%;
  height: 1px;
  background-color: #fff;
  opacity: 0.5;
  z-index: 1;
}

.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  color: #31A653;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.step.completed {
  opacity: 1;
  background-color: #fff;
  // border: 1px solid #ff0000;
}

.step-label {
  font-size: 12px;
  color: #fff;
  text-align: center;
}

.next-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #ff0000;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.next-button:hover {
  background-color: #cc0000;
}

.custom-content {
  width: 100%;
  // height: 100vh;
  background: #fff;
  margin-top: -55px;
  padding-top: 0.32rem;
  position: relative;
  z-index: 999;
  border-radius: 12px 12px 0px 0px;
}
</style>
